<template>
	<view class="qh-tabs flex-spb-cn">
		<view v-if="bottomLine" class="qh-tabs-default-line" :style="bottomLineStyle"></view>
		<view class="qh-tabs-scroll-box" :style="scrollBoxStyle">
			<scroll-view class="qh-tabs-scroll" scroll-x :scroll-left="scrollLeft">
				<view class="qh-tabs-item-box flex-cn" :style="itemBoxStyle">
					<view class="qh-tabs-item" v-for="(item, index) in list" :key="index" :style="itemStyle" @click="tabChange(item)">
						<text class="qh-tabs-item-text" :class="[
								item[keyField] == value ? ('active' + (actLineBreak ? ' active-50' : '')) : '',
								size == 'small' ? 'small' : ''
							]" :style="item[keyField] == value ? actItemStyle : ''">{{item[keyName]}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<slot name="right"></slot>
	</view>

</template>

<script>
	export default {
		name: 'qh-tabs',
		props: {
			value: {
				type: [String, Number],
				default: '',
			}, //选中的value值
			index: {
				type: Number,
				default: 0,
			}, //选中的下标
			list: {
				type: Array,
				default () {
					return {}; //格式：[{name:'',value:''},{name:'',value:''}]
				}
			},
			size: {
				type: String,
				default: '',
			}, //字体大小类型  默认32rpx  为small时28rpx
			itemRight: {
				type: [Number, String],
				default: 60,
			}, //标签的右边距  flexSpace为true时失效
			lRPadding: {
				type: Number,
				default: 24,
			}, //标签的左右边距
			itemColor: {
				type: String,
				default: '#5F6267'
			}, //选项未选中颜色
			itemActColor: {
				type: String,
				default: 'var(--primary-color)'
			}, //选项已选中的颜色
			actLineColor: {
				type: String,
				default: 'var(--primary-color)'
			}, //选中时的下划线颜色
			actLineBreak: {
				type: Boolean,
				default: false
			}, //选中的线宽度较文本的比例是否缩小一半
			bottomLine: {
				type: Boolean,
				default: true,
			}, //底部横线是否显示
			actLine: {
				type: Boolean,
				default: true,
			}, //底部选中横线是否显示
			bottomLineColor: {
				type: String,
				default: '#E8E8EA'
			}, //底部横线的颜色
			flexSpace: {
				type: Boolean,
				default: false,
			}, //是否是flex两边对齐，是则itemRight失效
			flexSpaceType: {
				type: String,
				default: 'around',
			}, //两边对齐方式：around|between|center，flexSpace为true时生效
			keyName: {
				type: String,
				default: 'name',
			}, //展示的字段名
			keyField: {
				type: String,
				default: 'value',
			}, //绑定的字段名
			disabled: {
				type: Boolean,
				default: false,
			}, //是否禁止切换选项
		},
		data() {
			return {
				scrollLeft: 0,
			}
		},
		emits: ['change', 'input'],
		computed: {
			scrollBoxStyle() {
				return 'padding-left:' + this.$getUnitSize(this.lRPadding) + ';padding-right:' + this.$getUnitSize(this.lRPadding);
			},
			itemBoxStyle() {
				let str = this.flexSpace ? '' : 'display:inline-flex;';
				return str + (this.flexSpace ? ('justify-content:' + (this.flexSpaceType == 'center' ? 'center' : (' space-' + this.flexSpaceType))) : '');
			},
			itemStyle() {
				let arr = [
					'color:' + this.itemColor,
				];
				if (!this.flexSpace) {
					arr.push('margin-right:' + this.$getUnitSize(this.itemRight));
				}
				return arr.join(';');
			},
			actItemStyle() {
				let arr = [
					'color:' + this.itemActColor,
				];
				return arr.join(';');
			},
			bottomLineStyle() {
				let arr = [
					'background-color:' + this.bottomLineColor,
				];
				return arr.join(';');
			},
		},
		methods: {
			//点击选项
			tabChange(item) {
				if (this.disabled) return;
				if (item[this.keyField] != this.value) {
					this.$emit('input', item[this.keyField]);
					this.$emit('change', item);
				}
			},
		},
		watch: {
			list: {
				deep: true,
				handler(n, o) {
					if (JSON.stringify(n) != JSON.stringify(o)) {
						this.scrollLeft = 0;
					}
				}
			},
			value: {
      handler: function (newVal) {
        this.$nextTick(() => {
          const index = this.list.findIndex(item => item[this.keyField] == newVal);
          if (index !== -1) {
            const query = uni.createSelectorQuery().in(this);
            query.selectAll('.qh-tabs-item').boundingClientRect();
            query.select('.qh-tabs-scroll').boundingClientRect();
            query.exec((res) => {
              const elementWidth = res[0][index].width;
              const elementLeft = res[0][index].left;
              const scrollViewWidth = res[1].width;
 
              this.scrollLeft = elementLeft - (scrollViewWidth / 2) + (elementWidth / 2);
			  console.log(this.scrollLeft ,elementLeft , 'this.scrollLeft ')
            });
          }
        });
      },
      immediate: true, // 立即执行处理程序
    },
		},
	}
</script>

<style lang="scss">
	.qh-tabs {
		height: 78rpx;
		width: 100%;
		box-sizing: border-box;
		position: relative;

		.qh-tabs-scroll-box {
			flex: 1;
			height: 100%;
			overflow: hidden;

			.qh-tabs-scroll {
				width: 100%;
				height: 100%;
				position: relative;
				white-space: nowrap;
				transition: 0.3s;
				overflow-x: scroll;

				.qh-tabs-item-box {
					height: 100%;
					box-sizing: border-box;
					position: relative;

					.qh-tabs-item {
						display: inline-flex;
						align-items: center;
						justify-content: center;
						padding-bottom: 2rpx;
						height: 100%;
						color: #5F6267;
						box-sizing: border-box;

						&:nth-last-child(1) {
							margin-right: 0 !important;
						}

						.qh-tabs-item-text {
							line-height: 78rpx;
							font-size: 32rpx;
							white-space: nowrap;
							position: relative;
							height: 78rpx;
							transition: 0.1s;	
							z-index: 10;
							&::after {
								content: "";
								position: absolute;
								bottom: 16rpx;
								left: 0;
								right: 0;
								margin: auto;
								height: 20rpx;
								width: 0;
								// background-color: var(--primary-color);
								background: #93D982;
								// background: linear-gradient( 33deg, #FFB73F 0%, #7DE464 100%);
								border-radius: 16rpx;
								z-index: -1;
							}

							&.small {
								font-size: 28rpx;
							}

							&.active {
								font-weight: bold;
								color: var(--primary-color);

								&::after {
									width: 100%;
								}

								&.active-50 {
									&::after {
										width: 100%;
									}
								}
							}
						}
					}
				}

			}
		}

		.qh-tabs-default-line {
			width: 100%;
			height: 2rpx;
			background-color: #E8E8EA;
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}
</style>
